<?php
$this->headTitle()->prepend($this->translate('about_news_description') . ' - ');
$this->headLink()->appendStylesheet($this->APP_STATIC_SERVER . '/skins/admin/default/css/form.css');
$this->headScript()
        ->appendFile($this->APP_STATIC_SERVER . '/public/js/jquery.validate.js')
        ->appendFile($this->APP_STATIC_SERVER . '/public/js/tomato.util.js')
        ->appendFile($this->APP_STATIC_SERVER . '/public/js/tinymce/tiny_mce.js')
        ->appendFile($this->APP_STATIC_SERVER . '/public/js/jquery.json-2.3.min.js');
?>

<div id="r-heading">
    <img src="<?php echo $this->APP_STATIC_SERVER . '/skins/admin/default/images/article.png'; ?>" alt=""/>
    <span><?php echo $this->translate('task_add_article') ?></span>
</div>
<?php
$massage = $this->flashMessenger();
if ($massage) {
?>
    <div id="message"><?php echo $massage; ?></div>
<?php } ?>

<form id="frmAddArticle" class="" enctype="application/x-www-form-urlencoded" action="" method="post">
    <div class="r-left" style="width:60%; float:left;">
        <div class="row">
            <label for="language"><?php echo $this->translate('article_language'); ?></label>
            <?php echo $this->languageSelector(array('name' => 'language')); ?>
        </div>
        <div class="row">
            <label><?php echo $this->translate('article_source_item'); ?>:</label>
            <div class="translatable translationSourceItems">
            <?php
            echo $this->translatableArticle(array(
                                    'id'       => 'sourceItem',
                                    'name'     => 'sourceItem',
                                    'class'     => '',
                                    'selected' => (null == $this->sourceArticle) ? null : $this->sourceArticle->id,
                                    'disabled' => (null == $this->sourceArticle) ? null : $this->sourceArticle->id,
                              ), $this->lang);
            ?>
            </div>
        </div>
        <div class="row">
            <label for="title" class="required"><?php echo $this->translate('article_title') ?></label>
            <input class="text" type="text" name="title" id="title" value="" size="50" />
        </div>
        <div class="row">
            <label for="slug" class="required"><?php echo $this->translate('article_slug') ?></label>
            <input type="text" name="slug" id="slug" value="" size="50" />
        </div>
        <div class="row">
            <label for="summary"><?php echo $this->translate('article_summary') ?></label>
            <textarea style="width:323px;" name="summary" rows="24" cols="100"></textarea>
        </div>
        <div class="row">
            <label for="content" class="required"><?php echo $this->translate('article_content') ?></label>
            <textarea name="content" class="tinymce" id="content" rows="24" cols="100"></textarea>
        </div>




    </div>
    <div class="r-right" style="width:35%;float:right;">
        <div class="box">
            <div class="b-title">
                <?php echo $this->translate('article_published') ?>
            </div>
            <div class="b-container">
                <div class="row">
                    <label><?php echo $this->translate('article_category') ?></label>
                    <div class="translatable">
                            <?php echo $this->helperLoader('category')->categorySelect(array('id' => 'category', 'name' => 'category_id'), null , 'news'); ?>
                      </div>
                </div>
                <div class="row">
                    <label><?php echo $this->translate('article_status') ?></label>
                    <select name="status">
                        <option value="inactived"><?php echo $this->translate('article_list_filter_inactived') ?></option>
                        <option value="actived"><?php echo $this->translate('article_list_filter_actived') ?></option>
                        <option value="drafted"><?php echo $this->translate('article_list_filter_drafted') ?></option>
                    </select>
                </div>
                <div class="row">
                    <label for="allow-comment" style="float: left; width: 220px;"><?php echo $this->translate('article_allow_comment') ?></label>
                    <input id="allow-comment" type="checkbox" name="allow_comment" value="1"/>
                </div>
                <div class="row">
                    <label for="featured" style="float: left; width: 220px;"><?php echo $this->translate('article_featured') ?></label>
                    <input id="featured" type="checkbox" name="featured" value="1"/>
                </div>
                <div class="row">
                    <label for="author"><?php echo $this->translate('article_author') ?></label>
                    <input type="text" name="author" id="author" value="" size="50" />
                </div>
            </div>
        </div>
        <div class="box">
            <div class = "b-title">
                <?php echo $this->translate('article_multimedia') ?>
            </div>
            <div class="b-container">
                <?php
                echo
                $this->helperLoader('upload')->uploader('news',
                        array('extension' => '*.jpg;*.jpeg;*.png;*.gif', 'fileExt' => '*.jpg;*.jpeg;*.png;*.gif', 'multi' => true, 'auto' => true, 'simUploadLimit' => 5, 'sizeLimit' => 1024 * 1024 * 5),
                        array('onComplete' => 'onUploadComplete','onError' => 'onUploadError'));
                ?>
                <div style="margin-top: 10px;" class="photos"><ul id="photos"></ul></div>
            </div>
        </div>
        <div class="box">
            <div class="b-title"><?php echo $this->translate('article_thumbnail')?></div>
            <div class="b-container">
                
                <input type="hidden" id="articleImages" name="articleImages"
					<?php if ($this->sourceArticle) : ?>
					value='<?php echo Zend_Json::encode(array(
									'square' 	=> $this->sourceArticle->image_square,
									'thumbnail' => $this->sourceArticle->image_thumbnail,
									'small' 	=> $this->sourceArticle->image_small,
									'crop' 		=> $this->sourceArticle->image_crop,
									'medium' 	=> $this->sourceArticle->image_medium,
									'large' 	=> $this->sourceArticle->image_large,
								)); ?>'
					<?php endif; ?> />
                <p><?php echo $this->translate('article_select_image_guide'); ?></p>
                <img src="" alt="" id="image-thumbnail"/>
            </div>
        </div>
        <div class="box">
            <div class="b-title"><?php echo $this->translate('article_seo') ?></div>
            <div class="b-container">
                <div class="row">
                    <label for="meta_title"><?php echo $this->translate('article_meta_title') ?></label>
                    <input type="text" name="meta_title" id="meta_title" value="" size="50" />
                </div>
                <div class="row">
                    <label for="meta_description"><?php echo $this->translate('article_meta_description') ?></label>
                    <textarea cols="38" rows="5" name="meta_description" id="meta_description"></textarea>
                </div>
                <div class="row">
                    <label for="meta_keywords"><?php echo $this->translate('article_meta_keywords') ?></label>
                    <input type="text" name="meta_keywords" id="meta_keywords" value="" size="50" />
                </div>

            </div>
        </div>
        <div class="row" style="width:100%; clear: both;">
            <input class="button" type="submit" name="submit" id="submit" value="<?php echo $this->translate('common_save') ?>" />
            <input class="button" type="reset" name="reset" id="reset" value="<?php echo $this->translate('common_reset') ?>" />
        </div>
    </div>
</form>

<script type="text/javascript">
    /**
     * Init TinyMCE instances
     */
    tinyMCE.init({
        theme: 'advanced',
        theme_advanced_toolbar_location: 'top',
        theme_advanced_toolbar_align: 'left',
        width: '600',
        height: '225',
        mode: 'exact',
        elements: 'summary',
        relative_urls: false,
        remove_script_host: false
    });

    tinyMCE.init({
        theme: 'advanced',
        plugins: 'safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template',
        theme_advanced_buttons2: 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo',
        theme_advanced_buttons3: 'link,unlink,anchor,image,cleanup,code,|,preview,|,forecolor,backcolor',
        theme_advanced_buttons4: 'tablecontrols,ltr,rtl,', //"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_toolbar_location: 'top',
        theme_advanced_toolbar_align: 'left',
        width: '600',
        height: '400',
        mode: 'exact',
        elements: 'content',
        relative_urls: false,
        remove_script_host: false,
        onchange_callback: function(editor) {
            tinyMCE.triggerSave();
            $('#' + editor.id).valid();
        }
    });
    $(document).ready(function(){
        //điền slug
        $("#title").change(function(){
            $('#slug').val(Tomato.Util.generateSlug($(this).val()));
        });

        /**
         * Validate form
         */
        $.validator.addMethod('slug', function(value) {
            var regex = new RegExp(/^[a-z0-9\-]+$/);
            if (value.match(regex)) {
                return true;
            } else {
                return false;
            }
        });
        $.validator.addMethod("valueNotEquals", function(value, element, arg){
            return arg != value;
        }, "Value must not equal arg.");


        $('#frmAddArticle').validate({
            rules: {
                title: {
                    required: true,
                    maxlength: 255
                },
                slug: {
                    required: true,
                    slug: true,
                    maxlength: 255
                },
                content: {
                    required: true,
                    minlength: 10
                },
                category_id:{
                    valueNotEquals: 0
                }
            },
            messages: {
                title: {
                    required: "<?php echo $this->translate('article_title_required'); ?>",
                    maxlength: "<?php echo $this->translate('article_title_maxlength'); ?>"
                },
                slug: {
                    required: "<?php echo $this->translate('article_slug_required'); ?>",
                    slug: "<?php echo $this->translate('article_slug_validate'); ?>",
                    maxlength: "<?php echo $this->translate('article_slug_maxlength'); ?>"
                },
                content: {
                    required: "<?php echo $this->translate('article_content_required'); ?>",
                    minlength: "<?php echo $this->translate('article_content_minlength'); ?>"
                },
                category_id: {
                    valueNotEquals: "<?php echo $this->translate('article_category_required'); ?>"
            }

        }
        
    });
});
    /**
 * Upload handlers
 */
function onUploadError(event,ID,fileObj,errorObj) {
      alert(errorObj.type + ' Error: ' + errorObj.info);
    }
function onUploadComplete(event, ID, fileObj, response, data) {
    var images = jQuery.parseJSON(response);
    var presentImage = $('<img/>');
    $(presentImage).attr('src', images.thumbnail.url)
    .attr('width', '100').attr('height', '100')
    .attr('style', 'cursor: pointer')
    .click(function() {
        selectImage(images);
    });
    var select = $('<select/>');
    $(select).css('min-width', '100px');
    $('<option/>').attr('value', '').html('---').appendTo(select);

    for (var thumb in images) {
        $('<option/>').attr('value', images[thumb].url).html(images[thumb].size).appendTo(select);
    }
    $(select).change(function() {
        if ($(this).val() != '') {
            insertImage($(this).val());
        }
    });

    $('<li/>').append(presentImage).append($('<br/>')).append(select).appendTo($('#photos'));
};
function selectImage(images) {
    var urls = {};
    for (var thumb in images) {
        urls[thumb] = images[thumb].url;
    }
    $('#articleImages').val($.toJSON(urls));
    $('#image-thumbnail').attr('src',images.thumbnail.url);
};

/**
 * Insert image to TinyMCE editor at current position
 * @param string url The image url
 */
function insertImage(url) {
    tinyMCE.getInstanceById('content').execCommand('mceInsertContent', false, '<img src="' + url + '" />');
};
</script>